<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>GC Pages & Heap Usage Timeline (Merged File Loader)</title>
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
    <link rel="stylesheet" href="/css/styles.css" />
  </head>
  <body>
    <h1>Heap Dump View</h1>

    <!-- Merged Data Loading -->
    <div class="section-card">
      <h2>Data Loading</h2>
      <p>Upload a single heap dump file</p>
      <input
        type="file"
        id="merged-input"
        accept=".txt,.log,.csv"
        style="display: none"
      />
      <button
        class="gc-btn"
        onclick="document.getElementById('merged-input').click()"
      >
        Load Merged File
      </button>
      <span
        id="merged-file-name"
        style="margin-left: 10px; font-size: 0.75em; color: #555"
      ></span>
      <div
        id="load-status"
        style="margin-top: 10px; font-size: 0.7em; color: #444"
      ></div>
    </div>

    <div class="section-card">
      <h2>GC Correlation</h2>
      <p>click to interact with gc point</p>
      <div id="correlation-panel">
        <div id="correlation-rows"></div>
      </div>
    </div>

    <div class="section-card">
      <h2>Heap Usage Timeline</h2>
      <div class="ds-controls">
        <label>Downsampling:</label>
        <select id="ds-algo" class="ds-algo-select">
          <option value="bucket" selected>Bucket Min/Max</option>
          <option value="lttb">LTTB (triangles)</option>
        </select>
        <label for="ds-target">Target Points:</label>
        <input
          id="ds-target"
          class="ds-input"
          type="number"
          min="100"
          value="3000"
        />
        <button class="ds-btn" id="apply-ds-btn">Apply</button>
        <button class="ds-btn" id="toggle-original-btn">Show Original</button>
        <span id="ds-info" class="ds-badge">No data</span>
      </div>
      <div id="heap-chart"></div>
    </div>

    <div class="section-card">
      <h2>Page Dump View</h2>
      <div id="page-dump-view"></div>
    </div>

    <script type="module" src="/js/main.js"></script>
  </body>
</html>
